<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二维码生成，同时生成多个二维码</title>
</head>

<body>
    <script src="https://cdn.staticfile.org/qrcodejs/1.0.0/qrcode.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <div id="Application">
        <div v-for="itm in list" :key="itm.id">
            <div class="box" :id="itm.id">{{itm.title}}</div>
            <p>{{itm.url}}↑</p>
        </div>
    </div>
    <script>
        const App = Vue.createApp({
            setup() {
                //新建一个数据列表

                let list = {
                    0: {
                        id: "a",
                        url: "https://a.com",
                        title: "我是a内容",
                    },
                    1: {
                        id: "b",
                        url: "https://b.com",
                        title: "我是b内容",
                    },
                    2: {
                        id: "c",
                        url: "https://c.com",
                        title: "我是c内容",
                    },
                };

                //处理list数组，
                const qrShow = () => {
                    console.table(list);
                    for (let i in list) {
                        //拿到ID
                        arr_ID = list[i]["id"];
                        //拿到链接
                        arr_URL = list[i]["url"];
                        //拿到标题
                        att_TITLE = list[i]["title"];
                        //console.log(arr_ID, arr_URL, att_TITLE);

                        let qrcode = new QRCode(
                            document.getElementById(arr_ID),

                            {
                                text: arr_URL,
                                width: 200,
                                height: 200,
                            }
                        );
                        qrcode._el.title = att_TITLE; //设置图片标题
                    }
                };

                //延时加载
                //使用setTimeout延长获取节点并且渲染的时间
                setTimeout(() => {
                    qrShow();
                }, 10);

                return {
                    list,
                };
            },
        });

        App.mount("#Application");
    </script>
    <style>
        .box {
            width: 200px;
            height: 200px;
        }
    </style>
</body>

</html>